<template>
	<view class="">
		<view class="u-h-480">
			<view class="one u-abso">
				<view class="u-abso u-w-710  u-t-50 u-flex-col u-col-center u-l-20 u-p-10">
					<view class="cl_FF2D23FF u-w-660 u-auto u-text-left">当前抵扣金:</view>
					<view class="u-w-600 u-text-center cl_FF2D23FF u-font-88 u-weight">{{list.score}}</view>
					<view class="u-w-600 u-text-center cl_FF2D23FF">累计获得:{{list.cumulative_score}}</view>
				</view>
			</view>
			<view class="two u-abso u-l-h-90 u-text-center cl_FF2D23FF u-l-s-4 u-font-32" @click="sign">
				{{list.continue_days==0?'今日签到':'今日已签到'}}
			</view>
		</view>
		<view class="u-p-20">
			<view class="bg_FFFFFF u-b-r-16 u-p-30">
				<view class="u-font-30 u-weight">已连续签到<text class="cl_FF2D23FF">{{list.continue_days}}</text>天，签到奖励<text
						class="cl_FF2D23FF">{{list.sign_score}}</text>抵扣金</view>
				<view class="u-flex u-flex-wrap" :class="all?'':'u-h-300 u-hidden'">
					<view class="u-flex-col u-col-center u-m-t-20" v-for="(item,index) in list.log" :key="index">
						<view :class="item.is_continue==0?'bg_F5F5F5 cl_333333':'bl23_02 cl_FFF'"
							class="u-flex-col u-col-center u-row-center   u-w-110 u-h-120 u-b-r-10 u-m-l-10 u-m-r-10">
							<view
								:style="{'background':`${item.is_continue==0?'':'url(https://www.sqkjkj.vip/wxImg/common/sign/img5.png'}) no-repeat`,'background-size': '100% 100%'}"
								class="u-w-56 u-h-56 u-flex-col u-col-center u-row-center">
								<text :class="item.is_continue==0?'cl_333333':'cl_FF8900'"
									class="u-font-20 ">+{{list.sign_score}}</text>
							</view>
							<view class="u-text-center u-font-20 u-m-t-5">{{item.create_time}}次</view>
						</view>
					</view>
				</view>
				<!-- 签到规则 -->
				<view class="u-flex u-row-between u-m-t-30">
					<view class="u-flex" @click="show=true">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/sign/img6.png" mode="aspectFill" width="30rpx"
							height='30rpx'>
						</u-image>
						<view class="u-m-l-10 u-font-20 cl_FF5502FF">签到规则</view>
					</view>
					<view class="u-font-28" @click="all=true" v-if="!all">
						<text>展开</text>
						<u-icon name='arrow-down'></u-icon>
					</view>
					<view class="u-font-28" @click="all=false" v-else>
						<text>收起</text>
						<u-icon name='arrow-up'></u-icon>
					</view>
				</view>
			</view>
			<!-- 超级会员 -->
			<!-- <view class="u-m-t-30">
				<u-image src="https://www.sqkjkj.vip/wxImg/common/sign/img7.png" mode="aspectFill" width="700rpx" height='128rpx'></u-image>
			</view> -->
			<!-- 推荐商品 -->
			
			
			<!-- #ifdef MP-WEIXIN-->
			<view class="" style="min-height: 200px;" v-if="topAdInfo">
				<base-ad :adInfo="topAdInfo" ></base-ad>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef APP-ANDROID || H5 -->
			<view class="" style="height: 200px;" v-if="topAdInfo">
				<base-ad :adInfo="topAdInfo" ></base-ad>
			</view>
			<!-- #endif -->
			
			<view class="">
				<view class="u-font-30 u-weight u-m-t-30">推荐商品</view>
				<view class=" u-flex u-flex-wrap">
					<view class="u-w-335 bg_FFFFFF u-m-l-10 u-m-r-10 u-m-b-20 u-b-r-16"
						v-for="(item,index1) in shopList" :key="index1"
						@click="$u.route(`/pages/home/paymassage?num=${item.spu}`)">
						<!-- <image src="" mode="aspectFit"></image> -->
						<u-image :src="item.imgs[0]" mode="aspectFit" width="335rpx" height='335rpx'>
						</u-image>
						<view class="u-p-20">
							<view class="cl_1C1C1CFF u-weight text-cut">{{item.name}}</view>
							<view class="u-p-t-20">
								<view class="u-flex">
									<u-image v-if="item.is_bjg==1"
										src="https://www.sqkjkj.vip/wxImg/common/home/img10.png" mode="aspectFill"
										width="68rpx" height='30rpx'></u-image>
									<view class="cl_FC3533FF u-font-30 u-weight">￥{{item.price}}</view>
								</view>
								<view class="u-m-t-10 u-text-right cl_848484FF u-font-24">已售{{item.sales}}</view>
							</view>
							<view class="u-flex  u-p-t-20">
								<u-image :src="item.shop_logo" mode="aspectFill" width="44rpx" height='44rpx'>
								</u-image>
								<view class="cl_848484FF u-m-l-10 u-font-20">{{item.shop_name}}</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" icon-type="circle" margin-bottom="20" />
			</view>
		</view>
		<u-popup v-model="show" mode='center'>
			<view class="u-rela u-p-50 u-w-700 ">
				<view class="u-font-50 u-weight">签到规则</view>

				<view class="u-fix u-r-60 u-t-400">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/sign/heart.png" mode="aspectFill" width="216rpx"
						height='274rpx'>
					</u-image>
				</view>
				<view class="u-m-t-50">
					<u-parse :html="list.sign_rule"></u-parse>
				</view>
				<view @click="show=false"
					class="u-w-400 u-h-92 u-m-t-20 u-l-h-92 u-font-30 u-text-center u-auto cl_FFF u-b-r-20"
					style="background-color: #FC3533FF;">我知道了</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				params: {
					page: 1,
					page_size: 20,
				},
				shopList: [],
				// 展示签到规则
				show: false,
				all: false,
				status: 'loadmore',
				topAdInfo: null
			}
		},
		onLoad() {},
		onShow() {
			this.sign_log()
			this.clear()
			this.like_goods()
			this.getTopAd()
		},
		methods: {
			getTopAd() {
				this.$api.getAd({
					pos: 'sign'
				}, res => {
					console.log(res)
					this.topAdInfo = res.data.data
				})
			},
			async sign_log() {
				await this.$api.sign_log({}, res => {
					if (res.data.code == 1) {
						this.list = res.data.data
					}
				})
			},
			async sign() {
				if (this.list.continue_days > 0) {
					return
				}
				await this.$api.sign({}, res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'success',
							callback: cal => {
								this.sign_log()
							}
						})
					}
				})
			},
			clear() {
				this.shopList = [];
				this.params.page = 1;
			},
			like_goods() {
				this.$api.like_goods(this.params, res => {
					if (res.data.code == 1) {
						if (res.data.data.data.length < 20) {
							this.status = 'nomore';
						} else {
							this.params.page = this.params.page + 1;
							this.status = 'loadmore';
						}
						this.shopList = this.shopList.concat(res.data.data.data);
						uni.stopPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5FF !important;
	}

	.one {
		width: 750rpx;
		height: 481rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/sign/img1.png") no-repeat;
		background-size: 100% 100%;
	}

	.two {
		width: 429rpx;
		height: 91rpx;
		left: 160rpx;
		top: 280rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/sign/img2.png") no-repeat;
		background-size: 100% 100%;
	}
</style>